/**
 * 题目：
 * 介绍防抖节流原理、区别以及应用，并用JavaScript进行实现
 */

 /**
  * 1. 防抖： 函数被触发n秒以后执行回调，如果n秒内再次触发则重新计时
  * 使用场景：表单输入时及时搜索功能、点击按钮提交数据等等；
  * 思路：定义一个变量保存定时器的id，函数触发的时候先清除定时器，重新生成定时器，如果设置了immediate为true的话就是默认第一次进来不延迟；
  */
 
  export class Debounce {
    public use = (fn:Function, delay:number, immediate:boolean=false):Function=>{
      let timer:number|undefined;
      return (args:any)=>{
        clearTimeout(timer);
        if(immediate){
          fn.call(this, args);
          immediate = false;
          return
        }
        timer = window.setTimeout(()=>{
          fn.call(this, args);
        }, delay)
      }
    }
  }


  /**
   * 节流：函数在一定时间内只触发一次
   * 使用场景： 拖拽，缩放， 滚动等；
   * 思路：定义一个flag标记，默认为true；如果flag为true则执行回调并把flag置为false;设置一个定时器，延迟指定时间后把flag赋值为true；
   */
  export class Trottle{
    public use (fn:Function, delay:number):Function{
      let flag = true;
      return (args:any)=>{
        if(flag){
          fn.call(this, args);
          flag = false;
          setTimeout(()=>{
            flag = true;
          },delay)
        }
      }
    }
  }